<template>
  <view class="min-h-screen bg-gray-50">
    <!-- 自定义状态栏 -->
    <view class="bg-orange-500 h-[88rpx]"></view>
    
    <!-- 自定义导航栏 -->
    <view class="bg-orange-500 px-[32rpx] py-[24rpx] flex items-center justify-center relative">
      <text class="text-[36rpx] font-bold text-white">我的</text>
      <view class="absolute right-[32rpx] flex items-center space-x-[16rpx]">
        <view class="w-[6rpx] h-[6rpx] bg-white rounded-full"></view>
        <view class="w-[6rpx] h-[6rpx] bg-white rounded-full"></view>
        <view class="w-[6rpx] h-[6rpx] bg-white rounded-full"></view>
        <view class="w-[96rpx] h-[48rpx] bg-white bg-opacity-30 rounded-[32rpx] flex items-center justify-center ml-[16rpx]">
          <view class="w-[32rpx] h-[32rpx] bg-white rounded-full"></view>
        </view>
      </view>
    </view>

    <!-- 用户信息卡片 -->
    <view class="bg-orange-500 px-[32rpx] py-[40rpx] text-white relative">
      <!-- 背景装饰圆形 -->
      <view class="absolute right-[20rpx] top-[20rpx] w-[400rpx] h-[400rpx] rounded-full overflow-hidden opacity-30">
        <image 
          :src="userInfo.avatar" 
          class="w-full h-full object-cover"
          mode="aspectFill"
        />
      </view>
      
      <view class="flex items-center relative z-10">
        <image 
          :src="userInfo.avatar" 
          class="w-[120rpx] h-[120rpx] rounded-full mr-[32rpx] border-4 border-white border-opacity-30"
          mode="aspectFill"
        />
        <view class="flex-1">
          <text class="text-[36rpx] font-bold block mb-[8rpx]">{{ userInfo.nickname }}</text>
          <text class="text-[28rpx] opacity-90">{{ userInfo.phone }}</text>
        </view>
        <view class="text-right">
          <text class="text-[24rpx] block opacity-80">会员积分</text>
          <text class="text-[48rpx] font-bold">{{ userInfo.points }}</text>
        </view>
      </view>
    </view>

    <!-- 订单状态栏 -->
    <view class="bg-white mx-[32rpx] -mt-[40rpx] rounded-[24rpx] px-[32rpx] py-[32rpx] shadow-lg relative z-20">
      <view class="flex justify-between">
        <view 
          v-for="status in orderStatusList" 
          :key="status.key"
          class="flex flex-col items-center cursor-pointer"
          @tap="goToOrderList(status.key)"
        >
          <view class="relative mb-[16rpx]">
            <text class="text-[48rpx]">{{ status.icon }}</text>
            <view 
              v-if="status.count > 0"
              class="absolute -top-[8rpx] -right-[8rpx] bg-red-500 text-white text-[20rpx] rounded-full w-[32rpx] h-[32rpx] flex items-center justify-center"
            >
              {{ status.count > 99 ? '99+' : status.count }}
            </view>
          </view>
          <text class="text-[28rpx] text-gray-600">{{ status.title }}</text>
        </view>
      </view>
    </view>

    <!-- 我的服务 -->
    <view class="px-[32rpx] mt-[32rpx]">
      <view class="bg-white rounded-[24rpx] p-[32rpx] mb-[24rpx]">
        <text class="text-[32rpx] font-bold text-gray-800 block mb-[32rpx]">我的服务</text>
        <view class="grid grid-cols-4 gap-[32rpx]">
          <view 
            v-for="service in serviceList" 
            :key="service.key"
            class="flex flex-col items-center cursor-pointer"
            @tap="handleServiceClick(service)"
          >
            <view class="w-[80rpx] h-[80rpx] bg-orange-100 rounded-[20rpx] flex items-center justify-center mb-[16rpx]">
              <text class="text-[32rpx]">{{ service.icon }}</text>
            </view>
            <text class="text-[26rpx] text-gray-600 text-center">{{ service.title }}</text>
          </view>
        </view>
      </view>

      <!-- 功能菜单列表 -->
      <view class="bg-white rounded-[24rpx] overflow-hidden mb-[24rpx]">
        <view 
          v-for="(menu, index) in menuList" 
          :key="menu.key"
          class="flex items-center justify-between px-[32rpx] py-[32rpx] cursor-pointer"
          :class="{ 'border-b border-gray-100': index < menuList.length - 1 }"
          @tap="handleMenuClick(menu)"
        >
          <view class="flex items-center">
            <text class="text-[32rpx] mr-[24rpx]">{{ menu.icon }}</text>
            <text class="text-[32rpx] text-gray-800">{{ menu.title }}</text>
          </view>
          <text class="text-[28rpx] text-gray-400">›</text>
        </view>
      </view>

      <!-- 骑手中心 -->
      <view class="bg-white rounded-[24rpx] p-[32rpx] mb-[24rpx]">
        <view 
          class="flex items-center justify-between cursor-pointer"
          @tap="goToRiderCenter"
        >
          <view class="flex items-center">
            <view class="w-[80rpx] h-[80rpx] bg-blue-100 rounded-[20rpx] flex items-center justify-center mr-[24rpx]">
              <text class="text-[32rpx]">🚚</text>
            </view>
            <view>
              <text class="text-[32rpx] font-medium text-gray-800 block">骑手中心</text>
              <text class="text-[26rpx] text-gray-500">加入我们，开始赚钱</text>
            </view>
          </view>
          <text class="text-[28rpx] text-gray-400">›</text>
        </view>
      </view>
    </view>

    <!-- 底部安全区域适配TabBar -->
    <view class="h-[200rpx]"></view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import Taro from '@tarojs/taro'

/**
 * 个人中心页面 - 用户信息展示和功能入口
 * 性能优化：懒加载用户数据，图片使用缓存策略
 * 根据750rpx设计稿1:1转换，使用NutUI组件库+<script setup>语法
 */

interface UserInfo {
  id?: number
  nickname?: string
  phone?: string
  avatar?: string
  points?: number
  isLogin: boolean
}

interface OrderStatus {
  key: string
  title: string
  icon: string
  count: number
}

interface Service {
  key: string
  title: string
  icon: string
}

interface Menu {
  key: string
  title: string
  icon: string
  path?: string
}

// 响应式数据
const defaultProductImage = 'http://www.dzgktf.com/templets/default/images/wtyt.jpg'

// 用户信息
const userInfo = ref<UserInfo>({
  id: 1,
  nickname: '奶茶爱好者',
  phone: '138****8888',
  avatar: defaultProductImage,
  points: 1280,
  isLogin: true
})

// 订单状态列表（与截图一致）
const orderStatusList = ref<OrderStatus[]>([
  { key: 'pending', title: '待付款', icon: '💰', count: 0 },
  { key: 'preparing', title: '制作中', icon: '☕', count: 0 },
  { key: 'delivering', title: '配送中', icon: '🚚', count: 0 },
  { key: 'completed', title: '已完成', icon: '✅', count: 0 }
])

// 服务列表（与截图一致）
const serviceList = ref<Service[]>([
  { key: 'address', title: '收货地址', icon: '📍' },
  { key: 'coupon', title: '优惠券', icon: '🎫' },
  { key: 'points', title: '积分商城', icon: '🏆' },
  { key: 'customer-service', title: '客服', icon: '🎧' }
])

// 菜单列表（与截图一致）
const menuList = ref<Menu[]>([
  { key: 'feedback', title: '意见反馈', icon: '💭' },
  { key: 'about', title: '关于我们', icon: 'ℹ️' },
  { key: 'privacy', title: '隐私政策', icon: '🔒' },
  { key: 'help', title: '帮助中心', icon: '❓' }
])

// 方法
const goToOrderList = (status: string) => {
  console.log('跳转到订单列表:', status)
  Taro.navigateTo({
    url: `/pages/order/index?tab=${status}`
  })
}

const handleServiceClick = (service: Service) => {
  console.log('点击服务:', service.title)
  
  switch (service.key) {
    case 'address':
      Taro.showToast({ title: '收货地址功能', icon: 'none' })
      break
    case 'coupon':
      Taro.showToast({ title: '优惠券功能', icon: 'none' })
      break
    case 'points':
      Taro.showToast({ title: '积分商城功能', icon: 'none' })
      break
    case 'customer-service':
      Taro.showToast({ title: '客服功能', icon: 'none' })
      break
    default:
      break
  }
}

const handleMenuClick = (menu: Menu) => {
  console.log('点击菜单:', menu.title)
  
  switch (menu.key) {
    case 'feedback':
      Taro.showToast({ title: '意见反馈功能', icon: 'none' })
      break
    case 'about':
      Taro.showToast({ title: '关于我们功能', icon: 'none' })
      break
    case 'privacy':
      Taro.showToast({ title: '隐私政策功能', icon: 'none' })
      break
    case 'help':
      Taro.showToast({ title: '帮助中心功能', icon: 'none' })
      break
    default:
      break
  }
}

const goToRiderCenter = () => {
  console.log('跳转到骑手中心')
  Taro.navigateTo({
    url: '/pages/rider/index'
  })
}

// 生命周期
onMounted(() => {
  console.log('个人中心页面加载完成')
  // 可以在这里加载用户信息
})
</script>

<style lang="scss" scoped>
.grid {
  display: grid;
}

.grid-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.gap-32rpx {
  gap: 32rpx;
}

.space-x-16rpx > view:not(:first-child) {
  margin-left: 16rpx;
}

.cursor-pointer {
  cursor: pointer;
}

.border-b {
  border-bottom-width: 1rpx;
}

.border-gray-100 {
  border-color: #f3f4f6;
}

.bg-opacity-30 {
  background-color: rgba(255, 255, 255, 0.3);
}

.border-opacity-30 {
  border-color: rgba(255, 255, 255, 0.3);
}

.opacity-80 {
  opacity: 0.8;
}

.opacity-90 {
  opacity: 0.9;
}

.opacity-30 {
  opacity: 0.3;
}

.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.-mt-40rpx {
  margin-top: -40rpx;
}
</style> 